<MDXHeader
  title="Accordion"
  description="A vertically stacked set of interactive headings that each reveal a section of content."
  docs="https://kobalte.dev/docs/core/components/accordion"
/>

<ComponentPreview name="accordion-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

<TabsContent value="cli">

```bash
npx solidui-cli@latest add accordion
```

</TabsContent>

<TabsContent value="manual">
<Steps>

<Step>Install the following dependencies: </Step>

```bash
npm install @kobalte/core
```

<Step>Copy and paste the following code into your project: </Step>

<ComponentSource name="accordion" />

</Steps>
</TabsContent>

</Tabs>

### tailwind.config.js

Add the following animations to your `tailwind.config.js` file:

```js {5-18} /module/
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--kb-accordion-content-height)" }
        },
        "accordion-up": {
          from: { height: "var(--kb-accordion-content-height)" },
          to: { height: 0 }
        }
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out"
      }
    }
  }
}
```

## Usage

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger
} from "~/components/ui/accordion"
```

```tsx
<Accordion multiple={false} collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
</Accordion>
```
